<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目申报</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-card style="height: 580px;margin: 0 auto;">
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="申报年度:" size="">
          <el-date-picker
              v-model="form.reportYear"
              type="year"
              placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="运营单位:"  label-width="100px">
          <el-input :span="15" v-model="form.projectUnit" placeholder="请输入运营单位"></el-input>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select v-model="form.reportState">
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核失败" value="审核失败"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="selectByYear()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="clear()">重置</el-button>
        <el-button @click="drawer = true" icon="el-icon-plus" type="primary" style="margin-left: 16px;">
          新增
        </el-button>
        <el-drawer
            title="新增"
            size="800px"
            :visible.sync="drawer"
            :with-header="false"
        >

          <span style="display:block;line-height: 25px;font-size: 15px; margin:10px 20px">新增</span>
          <hr>
          <div style="margin-left: 20px; ">

            <center>
              <span style="font-size: 20px; font-weight: bold; ">山西省体育产业示范项目申报</span>
            </center>
            <br>
            <template >
              <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="示范项目申报表" name="first" >
                  <div id="commit_table">
                    <span class="demonstration" >申报年份:</span>
                    <el-date-picker
                        v-model="report.reportYear"
                        type="year"
                        placeholder="选择年份">
                    </el-date-picker>
                    <span class="demonstration" style="margin-left: 30px">申报类型:</span>
                    <el-select v-model="report.reportType" disabled placeholder="请选择">
                      <el-option  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                      </el-option>
                    </el-select><br>
                    <span>申报全称:</span><el-input placeholder="请输入申报全称" v-model="report.reportProject" style="width: 500px"></el-input><br>
                    <span>申报单位:</span><el-input placeholder="请输入运营单位" v-model="report.projectUnit" style="width: 500px"></el-input><br>
                    <span>机构代码:</span><el-input placeholder="请输入机构代码 " v-model="report.orgCode" style="width: 250px"></el-input>
                    <span>法人代表:</span><el-input placeholder="请输入法人代表" v-model="report.lawPerson" style="width: 250px"></el-input>
                    <br>
                    <span>联系人:</span><el-input placeholder="请输入联系人" v-model="report.linkPerson" style="width: 250px"></el-input>
                    <span>职位:</span><el-input placeholder="请输入职位" v-model="report.job" style="width: 250px"></el-input><br>
                    <span>电话:</span><el-input placeholder="请输入电话" v-model="report.tel" style="width: 250px"></el-input>
                    <span>传真:</span><el-input placeholder="请输入传真" v-model="report.fax" style="width: 250px"><br></el-input><br>
                    <span>申子邮箱:</span><el-input placeholder="请输入电子邮箱" v-model="report.email" style="width: 250px"></el-input>
                    <span>邮政编码:</span><el-input placeholder="请输入邮政编码" v-model="report.zipCode" style="width: 250px"></el-input><br>
                    <span>联系地址:</span><el-input placeholder="请输入联系地址" v-model="report.address" style="width: 500px"></el-input>
                    <br><center>
                    <br>
                    <el-button type="primary" @click="activeName='second'">下一步</el-button>

                  </center>


                  </div>


                </el-tab-pane>
                <el-tab-pane label="资质与基本情况" name="second">
                  <span>资质:</span>
                  <el-input  type="textarea"
                             :rows="4" v-model="report.qualifications"
                             autocomplete="off" placeholder="请输入资质"></el-input>
                  <span>基本情况:</span>
                  <el-input  type="textarea"
                             :rows="4" v-model="report.basicInformation"
                             autocomplete="off" placeholder="请输入基本情况"></el-input>
                  <el-button type="primary" @click="activeName='first'">返回</el-button>
                  <el-button type="primary" @click="activeName='third'">下一步</el-button>
                </el-tab-pane>
                <el-tab-pane label="经济社会效益" name="third">
                  <span>经济效益:</span>
                  <el-input  type="textarea"
                             :rows="5" v-model="report.economicEffect"
                             autocomplete="off" placeholder="请输入经济效益"></el-input>
                  <span>社会效益:</span>
                  <el-input  type="textarea"
                             :rows="5" v-model="report.socialEffect"
                             autocomplete="off" placeholder="请输入社会效益"></el-input>
                  <el-button type="primary" @click="activeName='second'">返回</el-button>
                  <el-button type="primary" @click="activeName='fourth'">下一步</el-button>
                </el-tab-pane>
                <el-tab-pane label="管理经营与规划" name="fourth">
                  <span>如何管理:</span>
                  <el-input  type="textarea"
                             :rows="5" v-model="report.management"
                             autocomplete="off" placeholder="请输入如何管理"></el-input>
                  <span>未来规划:</span>
                  <el-input  type="textarea"
                             :rows="5" v-model="report.planning"
                             autocomplete="off" placeholder="请输入未来规划"></el-input>
                  <el-button type="primary" @click="activeName='third'">返回</el-button>
                  <el-button type="primary" @click="report1()">提交申报</el-button>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>


        </el-drawer>
      </el-form>
      <div style=":border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;">
        已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{n}}</a>项
        <span style=" font-size: 15px; margin-left: 30px" >
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)" @click="clearT()">清空</a>
            </span>
        <span style=" font-size: 15px; margin-left: 30px" >
        <el-button
            size="mini"
            type="danger"
            v-if="n>0"
            @click="handleDeleteList()">全部删除</el-button>
   </span>
      </div>
      <template>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;"
            :border="true"
            @selection-change="selecteed"
        >
          <el-table-column
              type="selection"
              width="35">
          </el-table-column>
          <el-table-column
              prop="reportYear"
              label="申报年度"
              align="center"
              width="77">
          </el-table-column>
          <el-table-column
              prop="reportType"
              label="申报类型"
              align="center"
              width="77">
          </el-table-column>
          <el-table-column
              prop="reportProject"
              align="center"
              label="申报全称"
              width="150">
          </el-table-column>
          <el-table-column
              prop="projectUnit"
              align="center"
              label="基地单位"
              width="150">
          </el-table-column>
          <el-table-column
              prop="orgCode"
              label="机构代码"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="lawPerson"
              label="法人代表"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="linkPerson"
              label="联系人"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="job"
              label="职务"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="tel"
              label="电话"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="fax"
              label="传真"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="email"
              label="电子邮箱"
              align="center"
              width="200">
          </el-table-column>
          <el-table-column
              prop="zipCode"
              label="邮政编码"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="联系地址"
              align="center"
              width="200">
          </el-table-column>
          <el-table-column
              prop="reportState"
              label="审核状态"
              align="center"
              width="100">
          </el-table-column>

          <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="103">
            <template slot-scope="scope">
              <el-dropdown>
  <span class="el-dropdown-link">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text" @click="getRejectMessage(scope.row)">回驳意见</el-button>
                  </el-dropdown-item>

                  <el-dropdown-item>
                    <el-button type="text" @click="update(scope.row)">修改</el-button>

                  </el-dropdown-item>

                  <el-dropdown-item>
                    <el-button
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </el-dropdown-item>

                </el-dropdown-menu>

              </el-dropdown>

            </template>


          </el-table-column>

        </el-table>

      </template>

    </el-card>
    <el-dialog title="回驳意见" :visible.sync="reject"><hr>
      {{rejectMessage}}
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="reject = false">确 定</el-button>
        <el-button @click="reject = false">关 闭</el-button>
      </div>
    </el-dialog>


    <el-drawer
        title="修改"
        size="800px"
        :visible.sync="drawer2"
        :with-header="false"
    >

      <span style="display:block;line-height: 25px;font-size: 15px; margin:10px 20px">修改</span>
      <hr>
      <div style="margin-left: 20px; ">

        <center>
          <span style="font-size: 20px; font-weight: bold; ">山西省体育产业示范项目申报</span>
        </center>
        <br>
        <template >
          <el-tabs v-model="activeName2" @tab-click="handleClick" >
            <el-tab-pane label="示范项目申报表" name="first" >
              <div id="commit_table2">
                <span class="demonstration" >申报年份:</span>
                <el-date-picker
                    v-model="report2.reportYear"
                    type="year"
                    placeholder="选择年份">
                </el-date-picker>
                <span class="demonstration" style="margin-left: 30px">申报类型:</span>
                <el-select v-model="report2.reportType" disabled placeholder="请选择">
                  <el-option  v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                  </el-option>
                </el-select><br>
                <span>申报全称:</span><el-input placeholder="请输入申报全称" v-model="report2.reportProject" style="width: 500px"></el-input><br>
                <span>申报单位:</span><el-input placeholder="请输入运营单位" v-model="report2.projectUnit" style="width: 500px"></el-input><br>
                <span>机构代码:</span><el-input placeholder="请输入机构代码 " v-model="report2.orgCode" style="width: 250px"></el-input>
                <span>法人代表:</span><el-input placeholder="请输入法人代表" v-model="report2.lawPerson" style="width: 250px"></el-input>
                <br>
                <span>联系人:</span><el-input placeholder="请输入联系人" v-model="report2.linkPerson" style="width: 250px"></el-input>
                <span>职位:</span><el-input placeholder="请输入职位" v-model="report2.job" style="width: 250px"></el-input><br>
                <span>电话:</span><el-input placeholder="请输入电话" v-model="report2.tel" style="width: 250px"></el-input>
                <span>传真:</span><el-input placeholder="请输入传真" v-model="report2.fax" style="width: 250px"><br></el-input><br>
                <span>申子邮箱:</span><el-input placeholder="请输入电子邮箱" v-model="report2.email" style="width: 250px"></el-input>
                <span>邮政编码:</span><el-input placeholder="请输入邮政编码" v-model="report2.zipCode" style="width: 250px"></el-input><br>
                <span>联系地址:</span><el-input placeholder="请输入联系地址" v-model="report2.address" style="width: 500px"></el-input>
                <br><center>
                <br>
                <el-button type="primary" @click="updateContent()">提交修改</el-button>
              </center>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>


    </el-drawer>
  </div>
</template>

<script>
export default {
  data(){
    // name: "SUnitDeclaration"
    return {
      n:0,
      reject:false,
      rejectMessage:'这是一条假的回驳意见',
      form: {
        reportYear: '',
        projectUnit: '',
        reportState: '',
        reportType:'项目申报'
      },
      tableData: [],
      drawer: false,
      drawer2: false,
      activeName: 'first',
      activeName2: 'first',
      options: [{
        value: '项目申报',
        label: '项目申报'
      }],
      report:{
        reportType:'项目申报'
      },
      report2:{
        reportType:'项目申报'
      },
      ids:[]
    }
  },
  methods: {
    updateContent(){
        let url='http://localhost:8080/projects/update';
       let content = this.qs.stringify(this.report2)
      console.log(content)
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,content).then((response)=> {
            if(response.data.state==20000){
              this.$message.success("修改成功")
              this.loadProjectList()
              this.drawer2=false
            }else {
              this.$message.error(response.data.message)
            }
      })
      console.log(content)
    },
    getRejectMessage(report){
      if(report.reportState=='审核失败'){
      let url='http://localhost:8080/projects/getRejectMessage/'+report.id;
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
            this.rejectMessage = response.data.data
             this.reject=true
      })

      }else {
        this.$message.error('该状态无回驳信息')
      }
    },
    update(report){
      if(report.reportState=='待审核'){
        this.drawer2=true}
      else {
        this.$message.error(report.reportState+'无法修改!')
        return
      }
      console.log(report.reportState)

      let url='http://localhost:8080/projects/selectById/'+report.id;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        let responseBody = response.data
        this.report2 = responseBody.data;
      })

    },
    handleDeleteList(){
      let url='http://localhost:8080/projects/deleteByIds/'+this.ids;
      // let ids=this.qs.stringify(this.ids);
      console.log("发送批量删除请求:",url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=> {
        this.loadProjectList();
      })

    },
    loadProjectList(){
      let url='http://localhost:8080/projects/projectList/'+this.report.reportType;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        let responseBody = response.data
        this.tableData = responseBody.data;
      })
    },
    selecteed(selections){
      this.n=selections.length
      this.ids=[]
      for (let i = 0; i < selections.length; i++) {
        this.ids[i]=selections[i].id
      }
    },
    selectByYear(){

      let url='http://localhost:8080/projects/selectByYear';
      let from=this.qs.stringify(this.form);
      console.log("发送条件查询请求:",url+from)
      this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}}).post(url,from).then((response)=>{
        let responseBody = response.data
        this.tableData = responseBody.data;
      })
    },
    clear(){
      this.form={
        reportType:'项目申报'
      }
      this.loadProjectList();
    },
    clearT(){
      this.$refs.multipleTable.clearSelection();
    },
    handleDelete(index, row) {
      if(confirm("您确定删除吗?")){
        let url = "http://localhost:8080/projects/";
        this.axios.create({'headers': {'Authorization': localStorage
                .getItem('jwt')}}).post(url+row.id+"/delete")
            .then( (response)=> {

              console.log("id====="+row.id)
              this.tableData.splice(index,1);
            })
        console.log(index, row);}
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    report1(){
      let url='http://localhost:8080/projects/add-new';
      let report=this.qs.stringify(this.report);
      this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,report).then((response)=>{
        if(response.data.state==20000){
          this.$message.success("添加申报成功")
          this.drawer=false
          this.report={
            reportType:'基地申报'
          }
        }else{
          this.$message.error(response.data.message)
        }
        this.loadProjectList();
      })
    }
  },mounted() {
    this.loadProjectList();
  }

}
</script>

<style scoped>
#commit_table>span{
  display: inline-block;
  margin: 15px 25px;
}
#commit_table2>span{
  display: inline-block;
  margin: 15px 25px;
}
</style>